<template>
  <div>
    <div class="helper-center-detail">
      <div class="title">热门问题</div>
      <div class="question">
        <div class="list">
          <div class="item"
            v-for="v in list" :key="v.id"
            :class="{active: inArray(long, v.id) !== false}"
            @click="chooseLong(v.id)"
          >
            <p v-html="v.question"></p>
            <span v-html="v.answer"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelperDetail',
    data () {
      return {
        list: [],
        long: []
      }
    },
    methods: {
      getList () {
        let params = {category_id: this.$route.params.id}
        this.$post('/vue/help_center/get_list_by_category', params).then(data => {
          this.list = data
        })
      },
      chooseLong (id) {
        let index = this.inArray(this.long, id)
        if (index !== false) {
          this.long.splice(index, 1)
        } else {
          this.long.push(id)
        }
      },
      inArray (arr, val) {
        for (let i = 0; i < arr.length; i++) {
          if (val === arr[i]) {
            return i
          }
        }
        return false
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-226: rgb(226, 226, 226);
  @c-blue: rgb(108, 184, 222);

  .helper-center-detail {
    background-color: #FFF;
    height: 100vh;
    overflow-x: hidden;
    .line {
      height: 8px;
      background-color: rgb(240, 244, 247);
    }
    .title {
      padding: 12px;
      font-size: 13px;
      font-weight: bold;
      line-height: 24px;
      text-align: left;
      color: @c-124;
    }
    .question {
      border-top: 1px solid @c-226;
      display: flex;
      align-items: flex-start;
      align-content: flex-start;
      justify-content: space-between;
      &:nth-last-child(1) {
        border-bottom: 1px solid @c-226;
      }
      .list {
        flex: 1;
        .item {
          padding: 6px 12px;
          height: 36px;
          box-sizing: border-box;
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
          text-align: left;
          border-bottom: 1px solid @c-226;
          overflow: hidden;
          position: relative;
          transition: .25s all;
          &.active {
            height: auto;
          }
          &:last-child {
            border: 0;
          }
          &:active {
            background-color: rgba(0, 0, 0, .1);
          }
          &::after {
            border: 1px solid #c8c8cd;
            border-bottom-width: 0;
            border-left-width: 0;
            content: '';
            top: 16px;
            right: 5vw;
            position: absolute;
            width: 7px;
            height: 7px;
            transform: translateY(-50%) rotate(135deg);
          }
        }
      }
    }
  }
</style>